<template>
	<view class="recruit">
		{{userInfo.shopId}}
		<view class="data-box">
			<view class="row-data" style="margin-top: 80rpx;">
				<view class="row-left">
					<span style="color: red;">*</span>真实姓名：
				</view>
				<input class="inputClass" placeholder="请输入真实姓名" v-model="userInfo.nickname"  placeholder-style="font-size: 32rpx !important;"/>
			</view>
			<view class="row-data" style="margin-top: 80rpx;">
				<view class="row-left">
					<span style="color: red;">*</span>年龄：
				</view>
				<input class="inputClass" type="number" placeholder="请输入年龄" v-model="userInfo.age"  placeholder-style="font-size: 32rpx !important;"/>
			</view>
			<view class="row-data" style="margin-top: 80rpx;" @click="show = true">
				<view class="row-left">
					<span style="color: red;">*</span>性别：
				</view>
				<picker mode="selector" :show="show" :range="columns" @change="confirm">
					{{userInfo.gender == null?'请选择':(userInfo.gender == '0'?'男':'女')}}
				</picker>
			</view>
			<view class="row-data">
				<view class="row-left">
					<span style="color: red;">*</span>电话号码：
				</view>
				<input class="inputClass" type="number" maxlength="11" placeholder="请输入电话号码" v-model="userInfo.phone"  placeholder-style="font-size: 32rpx !important;"/>
			</view>
			<view class="row-data">
				<view class="row-left">
					<span style="color: red;">*</span>身份证号：
				</view>
				<input class="inputClass" placeholder="请输入身份证号" maxlength="18" v-model="userInfo.cardId"  placeholder-style="font-size: 32rpx !important;"/>
			</view>
			
			<view class="bottomEnt">
				<u-button  type="primary" text="配 送 员 入 驻" @click="submitData">配 送 员 入 驻</u-button>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex';
	export default {
		data() {
			return {
				userInfo: {
					id: null,
					gender: null,
					shopId: null,
					age: null,
					nickname: null,
					phone: "",
					cardId: "",
				},
				show: false,
				columns: ['男','女'],
			}
		},
		computed: {
			...mapState(['token'])
		},
		onLoad(option) {
			console.log(option.scene);
			this.userInfo.shopId = option.scene
			// 判断用户是否登录
			this.checkLogin();
		},
		methods: {
			// 回调参数为包含columnIndex、value、values
			confirm(e) {
				console.log('confirm', e)
				this.userInfo.gender = e.detail.value == '0'?1:0
				this.show = false
			},
			submitData() {
				if(this.userInfo.nickname == ""){
					uni.showToast({
						title: '真实姓名不能为空',
						icon: 'none',
						duration: 2000
					})
				}else if(this.userInfo.phone.length != 11) {
					uni.showToast({
						title: '请输入正确的手机号',
						icon: 'none',
						duration: 2000
					})
				}else if(this.userInfo.cardId.length != 18) {
					uni.showToast({
						title: '请输入正确的身份证号',
						icon: 'none',
						duration: 2000
					})
				}else if(this.userInfo.gender == null){
					uni.showToast({
						title: '性别不能为空',
						icon: 'none',
						duration: 2000
					})
				}
				else{
					// 绑定
					this.userInfo.id = uni.getStorageSync("userInfo").id
					this.userInfo.wechatId = uni.getStorageSync("userInfo").wechatId
					console.log(this.userInfo);
					this.$api.request.shopBinding(this.userInfo, res =>{
						if(res.code == 200){
							setTimeout(() => {
								uni.showToast({
									title: '申请成功',
									icon:'success'
								})
								setTimeout(() => {
									uni.switchTab({										url: '/pages/sys/home/index'									});
								}, 2000)
							}, 50)
						}
					})
				}
			},
			// 授权登录
			// 登录
			checkLogin() {
				const that = this
				uni.showModal({
					title: '温馨提示',
					content: '授权后方可填写资料',
					showCancel: false,
					success: (res) => {
						if(res.confirm){
							uni.getUserProfile({
								desc: "获取你的昵称、头像、地区及性别",
								success: (res) => {
									console.log(res);
									uni.showLoading({
										//title: '加载中'
									});
									this.$api.request.userLoginOrAdd({
										encryptedData: res.encryptedData,
										iv: res.iv,
										sessionKey: this.session_key,
										wechatId: uni.getStorageSync('openId'),
										sourceType: "APP",
										nickName: res.userInfo.nickName,
										avatarUrl: res.userInfo.avatarUrl
									}, resp => {
										console.log(resp);
										uni.hideLoading();
										if (resp.code == 200) {
											this.$store.commit("setToken", resp.data.tokenValue)
											this.$store.commit("login", resp.data);
											uni.setStorageSync('authStatus', true)
											this.$api.request.userInfo({}, res => {
												if (res.code == 200) {
													uni.setStorageSync('userInfo', res.data)
												}
											})
										}
									})
								},fail: (err) => {
									this.checkLogin()
								}
							})
						}
						else if(res.cancel){
							setTimeout(() => {
								uni.showToast({
									title: '拒绝授权',
									icon: 'none'
								})
								setTimeout(() => {
									uni.switchTab({
										url: '/pages/sys/home/index'
									});
								}, 2000)
							}, 50)
						}
					}
				})
			},
		}
	}
</script>

<style lang="scss">
	.data-box{
		width: 100vw;
		border-radius: 10rpx;
	}
	.data-title{
		width: 100%;
		text-align: center;
		font-size: 36rpx;
		font-weight: bold;
		margin-top: 40rpx;
	}
	.row-data{
		display: flex;
		flex-direction: row;
		font-size: 32rpx;
		align-items: center;
		margin-bottom: 30rpx;
	}
	.row-left{
		width: 220rpx;
		margin-top: -8rpx;
		margin-left: 20rpx;
	}
	.inputClass{
		width: calc(100% - 280rpx);
		border: none !important;
		font-size: 32rpx !important;
		border-bottom: 1rpx solid #F1F1F1 !important;
	}
	.addtide-box{
		display: flex;
		flex-direction: row;
		font-size: 32rpx;
		margin-top: 50rpx;
	}
	.textared-text{
		width: calc(100% - 280rpx);
		border: 1rpx solid #F1F1F1;
	}
	.bottomEnt{
		width: auto !important;
		margin: 0 40rpx;
		margin-top: 160rpx;
	}
</style>
